<template>
	<view class="user_top">
		<view>
			<image :src="avatar"></image>
			<p>{{username}}</p>
		</view>
		<view class="user_top_foot">
			<view class="head_left head_width">
				<p class="readDotTitle">阅 读 点</p>
				<p><span class="readDot">0</span></p>
			</view>
			<view class="head_right head_width">
				<p class="head_vip">VIP 0</p>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		name:"userTop",
		data() {
			return {
				username:'1',
				avatar:'../../static/user/head.png'
			};
		},
		onLoad() {
		},
		created() {
			this.username = uni.getStorageSync("username")
			this.avatar = uni.getStorageSync("avatar")
			console.log(this.avatar)
		}
	}
</script>

<style scope>
	.user_top{
		width: 95vw;
		height: 40vh;
		margin: 5vh auto;
		border-radius: 3px;
		box-shadow: 0 0 8px rgb(0,0,0,0.5);
	}
	.user_top image{
		width: 80px;
		height: 80px;
		margin: 1vh 37.5vw;
		border-radius: 100%;
	}
	.user_top p{
		text-align: center;
	}
	.user_top_foot{
		width: 95vw;
		height: 30vh;
	}
	.head_width{
		width: 47vw;
		height: 12vh;
		float: left;
		margin-top: 3vh;
	}
	.head_left{
	}
	.head_right{
		border-left: thick solid rgba(0,0,0,0.2);
		border-left-width: 0.2vw;
	}
	.readDotTitle{
		color: rgba(0,0,0,0.4);
		font-size: 10px;
	}
	.readDot{
		line-height: 60px;
		font-size: 30px;
	}
	.head_vip{
		line-height: 60px;
		font-size: 30px;
		font-weight: 100;
	}
</style>
